<template>
  <div class="main-panel">
    <el-skeleton animated :loading="totalPlaceLoad" >
      <template slot="template">
        <el-row><el-skeleton-item variant="text" style="height: 30px"/></el-row>
        <el-row :gutter="30" class="statistics-group">
            <el-col v-for="(item,index) in [1,2,3,4]" :key="index" :xs="12" :sm="12" :lg="6" class="statistics-panel-col">
              <el-skeleton-item variant="rect" style="height: 120px" />
            </el-col>
        </el-row>
      </template>
      <template>
        <el-tabs type="border-card" v-model="currentTab">
          <el-tab-pane v-for="tab in totalTabList" :key="tab.key" :label="tab.name" :name="tab.key">
            <el-row :gutter="30" class="statistics-group" >
                <el-col v-for="(item, index) in totalData[tab.key]" :key="index" :xs="12" :sm="12" :lg="6" class="statistics-panel-col">
                  <div class="statistics-panel">
                    <div class="statistics-panel-icon-wrapper icon-lightning" v-if="index<2">
                      <svg-icon icon-class="panel-lightning" class-name="statistics-panel-icon" />
                    </div>
                    <div class="statistics-panel-icon-wrapper icon-rubbit" v-if="index>=2">
                      <svg-icon icon-class="panel-rubbit" class-name="statistics-panel-icon" />
                    </div>
                    <div class="statistics-panel-description">
                      <div class="statistics-panel-text">
                        {{item.cn_name?item.cn_name:'未知'}}
                      </div>
                      <count-to :start-val="0" :end-val="parseInt(item.value)" :duration="2600" class="statistics-panel-num" />{{item.messure}}
                    </div>
                  </div>
                </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-skeleton>

<!--    <el-row :gutter="10" class="statistics-group">-->
<!--      <el-col :xs="12" :sm="12" :lg="3" class="statistics-panel-col">-->
<!--        <div class="statistics-panel" @click="handleSetLineChartData('newVisitis')">-->
<!--          <div class="statistics-panel-icon-wrapper icon-lightning">-->
<!--            <svg-icon icon-class="panel-lightning" class-name="statistics-panel-icon" />-->
<!--          </div>-->
<!--          <div class="statistics-panel-description">-->
<!--            <div class="statistics-panel-text">-->
<!--              发电量-->
<!--            </div>-->
<!--            <count-to :start-val="0" :end-val="102400" :duration="2600" class="statistics-panel-num" />度-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->
<!--&lt;!&ndash; 5等分  :lg="{span: '4-8'}"&ndash;&gt;-->
<!--      <el-col :xs="12" :sm="12" :lg="3" class="statistics-panel-col">-->
<!--        <div class="statistics-panel" @click="handleSetLineChartData('messages')">-->
<!--          <div class="statistics-panel-icon-wrapper icon-rubbit">-->
<!--            <svg-icon icon-class="panel-rubbit" class-name="statistics-panel-icon" />-->
<!--          </div>-->
<!--          <div class="statistics-panel-description">-->
<!--            <div class="statistics-panel-text">-->
<!--              总垃圾处理量-->
<!--            </div>-->
<!--            <count-to :start-val="0" :end-val="81212" :duration="3000" class="statistics-panel-num" />吨-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="12" :sm="12" :lg="3" class="statistics-panel-col">-->
<!--        <div class="statistics-panel" @click="handleSetLineChartData('purchases')">-->
<!--          <div class="statistics-panel-icon-wrapper icon-turbine">-->
<!--            <svg-icon icon-class="panel-turbine" class-name="statistics-panel-icon" />-->
<!--          </div>-->
<!--          <div class="statistics-panel-description">-->
<!--            <div class="statistics-panel-text">-->
<!--              平均汽耗率-->
<!--            </div>-->
<!--            <count-to :start-val="0" :end-val="30" :duration="3200" class="statistics-panel-num" />%-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="12" :sm="12" :lg="3" class="statistics-panel-col">-->
<!--        <div class="statistics-panel" @click="handleSetLineChartData('shoppings')">-->
<!--          <div class="statistics-panel-icon-wrapper icon-qushi">-->
<!--            <svg-icon icon-class="panel-qushi" class-name="statistics-panel-icon" />-->
<!--          </div>-->
<!--          <div class="statistics-panel-description">-->
<!--            <div class="statistics-panel-text">-->
<!--              平均厂用电率-->
<!--            </div>-->
<!--            <count-to :start-val="0" :end-val="60" :duration="3600" class="statistics-panel-num" />%-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="12" :sm="12" :lg="3" class="statistics-panel-col">-->
<!--        <div class="statistics-panel" @click="handleSetLineChartData('shoppings')">-->
<!--          <div class="statistics-panel-icon-wrapper icon-water">-->
<!--            <svg-icon icon-class="panel-water" class-name="statistics-panel-icon" />-->
<!--          </div>-->
<!--          <div class="statistics-panel-description">-->
<!--            <div class="statistics-panel-text">-->
<!--              平均厂补水率-->
<!--            </div>-->
<!--            <count-to :start-val="0" :end-val="80" :duration="3600" class="statistics-panel-num" />%-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--    <h3>经营状况</h3>-->
<!--    <el-row :gutter="10" class="sales-group">-->
<!--      <el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="sales-panel-col">-->
<!--        <el-card class="sales-panel-card" shadow="hover">-->
<!--          <i class="el-icon-info sales-info"/>-->
<!--          <el-row>-->
<!--            <el-col class="sales-panel-description">-->
<!--              <div class="sales-panel-text">-->
<!--                总发电量(度)-->
<!--              </div>-->
<!--              <count-to :start-val="0" :end-val="125231" :duration="3600" class="sales-panel-num" />-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row type="flex" justify="center" align="middle" class="sales-percent-than">-->
<!--            <el-col :span="10">-->
<!--              <div class="percent-than-col">-->
<!--                <span>上期比</span>-->
<!--                <i class="el-icon-caret-top"/>-->
<!--                <span>20%</span>-->
<!--              </div>-->
<!--            </el-col>-->
<!--            <el-col :span="4" />-->
<!--            <el-col :span="10">-->
<!--              <div class="percent-than-col">-->
<!--                <span>同期比</span>-->
<!--                <i class="el-icon-caret-bottom"/>-->
<!--                <span>10%</span>-->
<!--              </div>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-divider></el-divider>-->
<!--          <el-row type="flex" justify="space-around" align="middle" class="sales-number">-->
<!--            <el-col :span="6">上月:10</el-col>-->
<!--            <el-col :span="6">本月:10</el-col>-->
<!--            <el-col :span="6">同期:10</el-col>-->
<!--          </el-row>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import articleApi from '@/api/article'
export default {
  components: {
    CountTo
  },
  data(){
    return {
      totalTabList:null,
      currentTab:'',
      totalPlaceLoad:true,
      totalData:{
        'today':[],
        'yestoday':[],
        'month':[]
      }
    }
  },
  mounted() {
    this.totalTabList=[
      {key:'today',name:'今天'},
      {key:'yestoday',name:'昨天'},
      {key:'month',name:'本月'}];
    this.currentTab=this.totalTabList[0].key
    this.totalPlaceLoad=true
    articleApi.homeTotalData().then(res=>{
      this.totalData = res.data
      this.totalPlaceLoad=false
    })
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    }
  }
}
</script>

<style lang="scss" scoped>
.main-panel{
  width: 100%;
}
.sales-group{
  margin-top: 18px;

  .el-col-lg-4-8 {
		width: 20%;
	}

  .sales-panel-col{
    margin-bottom: 32px;
  }
  .sales-panel-card{
    position: relative;
    cursor: pointer;
    font-size: 12px;
    overflow: hidden;
    color: #666;

    .sales-info{
      position: absolute;
      right: 10px;
      top:20px;
    }

    .sales-panel-description {
      position: relative;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .sales-panel-text {
        line-height: 16px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        margin-bottom: 12px;
      }

      .sales-panel-num {
        font-size: 25px;
      }
    }
    .sales-percent-than{
      margin-top: 15px;
    }
    .sales-number{

    }
    .percent-than-col{
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

  }

}

.statistics-group {
  margin-top: 10px;

  .el-col-lg-4-8 {
		width: 20%;
	}

  .statistics-panel-col {
    margin-bottom: 20px;
  }

  .statistics-panel {
    height: 120px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .statistics-panel-icon-wrapper {
        color: #fff;
      }

      .icon-lightning {
        background: #1890ff;
      }

      .icon-rubbit {
        background: #d2e62f;
      }

      .icon-turbine {
        background:#34bfa3;
      }

      .icon-qushi {
        background: #62125e;
      }
      .icon-water{
        background: #36a3f7;
      }
    }

    .icon-lightning {
      color: #1890ff;
    }

    .icon-rubbit {
      color: #d2e62f;
    }

    .icon-turbine {
      color: #34bfa3;
    }

    .icon-qushi {
      color: #62125e;
    }
    .icon-water{
      color: #36a3f7;
    }

    .statistics-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .statistics-panel-icon {
      float: left;
      font-size: 38px;
    }

    .statistics-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px 26px 26px 0;

      .statistics-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .statistics-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .statistics-panel-description {
    display: none;
  }

  .statistics-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
